<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @cell-click="handleCell"
               :cell-class-name="addClass"
               >
    </avue-crud>
    <el-dialog title="考核明细"
                   append-to-body
                   :visible.sync="oneAppraiseBox"
                   width="70%">
        <avue-crud :option="oneAppraiseOption"
                  :data="dataScope"
                  :page="pageScope"
                  v-model="oneAppraiseForm"
                  ref="crudScope"
                  @on-load="onLoadScope"
                  :cell-style="cellStyle" 
                  :row-style="rowStyle">
                  
        <template slot-scope="scope" slot="menu">
          <el-button
            type="text"
            icon="el-icon-sunrise-1"
            v-if="scope.row.pass=='N' &&  scope.row.vacation!='V' && scope.row.vacation!='M'"
            @click.stop="handleVacation1(scope.row,scope.index)"
          >假
          </el-button>
          <el-button
            type="text"
            icon="el-icon-moon-night"
            @click.stop="handleVacation2(scope.row,scope.index)"
            v-if="scope.row.pass=='N' &&  scope.row.vacation!='V' && scope.row.vacation!='E'"
          >假
          </el-button>
         </template>
        </avue-crud>
          <!-- 请假 -->
    <el-dialog title="请假原因"
                   append-to-body
                   :visible.sync="vacationShow"
                   width="30%">
    <el-form ref="VacationForm" :rules="rules" :model="vacationForm" label-width="180px" size="mini">
     <el-card shadow="hover">
        <el-row>
          <el-col :span="24" v-if="false">
            <el-form-item label="userId" >
               <el-input  name="userId"  v-model="vacationForm.userId"/>
            </el-form-item>
            <el-form-item label="日期：" >
               <el-input  name="dutyDay"  v-model="vacationForm.dutyDay"/>
            </el-form-item>
            <el-form-item label="上午/下午：" >
               <el-input  name="morningOrEvening"  v-model="vacationForm.morningOrEvening"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-form-item label="批假理由："  prop="reason">
              <el-input  type="textarea" v-model="vacationForm.reason"/>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row>
              <el-form-item class="align-text:center">
                <el-button type="primary" @click="handleVacationSave('VacationForm')">保存</el-button>
                <el-button @click="handleCancel('VacationForm')">关闭</el-button>
              </el-form-item>
         </el-row>
     </el-card>
    </el-form>
    </el-dialog>   
    </el-dialog>   

  </basic-container>
</template>

<script>
  import {getList,getOneAppraiseList,vacationSave} from "@/api/xapply/appraise/appraise";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        oneAppraiseBox: false,
        vacationShow: false,
        form: {
          
        },
        vacationForm:{},
        query: {},
        loading: true,
        rules: {
        reason: [
          { required: true, message: '请输入批假理由', trigger: 'blur' },
        ],
        },
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          indexLabel:'序号',
          height: 'auto',
          calcHeight: 30,
          dialogWidth: 850,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          selection: false,
          excelBtn: false,
          addBtn:false,
          editBtn:false,
          delBtn:false,
          dialogClickModal: false,
          menu:false,
          column: [
               {
                  label: "主键id",
                  prop: "id",
                  hide: true,                 
                },
                {
                  label: "用户姓名",
                  prop: "name",
                  search: true,
                 
                },
                {
                  label: "所属网格",
                  prop: "deptName",
                },
                {
                  label: "上报事件",
                  prop: "found",
                },
                {
                  label: "解决事件",
                  prop: "deal",
                },
                {
                  label: "总时长",
                  prop: "time",
                  formatter:function(row){
                  return  Math.round(row.time * 100) / 100 + ' 小时'
                  }
                },
                {
                  label: "总距离",
                  prop: "distance",
                   formatter:function(row){
                    return  row.distance / 1000 + '公里'
                   }
                },
                {
                  label: "合格率",
                  prop: "pass",
                },
                 {
                  type: "daterange",
                  label: "考核时段",
                  span: 8,
                  format: "yyyy-MM-dd HH:mm:ss",
                  valueFormat: "yyyy-MM-dd HH:mm:ss",
                  prop: "timeRange",
                  searchRange: true,
                  hide: true,
                  addDisplay: false,
                  editDisplay: false,
                  viewDisplay: false,
                  search: true,
                },
                {
                  label: "查询开始",
                  prop: "beginDate",
                  hide: true,
                },
                {
                  label: "查询结束",
                  prop: "endDate",
                  hide: true,
                },
              ],
        },
        data: [],
         oneAppraiseForm: {},
         pageScope: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        oneAppraiseOption: {
             indexLabel: "序号",
              selection:false,
              height: 'auto',
              calcHeight: 180,
              menuWidth: 150,
              tip: false,
              searchShow: true,
              searchMenuSpan: 6,
              border: true,
              index: true,
              viewBtn: false,
              addBtn: false,
              editBtn: false,
              delBtn:false,
              dialogClickModal: false,
              header:false,

              column: [
               {
                   label: "id",
                   prop: "id",
                   hide: true,
                },
                {
                   label: "考核日期",
                   prop: "dutyDay",
                  
                },
                {
                  label: "上午标准",
                  prop: "standardMorning",
                  formatter:function(row){
                    return  Math.floor(row.standardMorning * 100) / 100 + ' 小时'
                   }
                },
                {
                  label: "上午时长",
                  prop: "morning",
                  formatter:function(row){
                    return  Math.floor(row.morning * 100) / 100 + ' 小时'
                   }
                },
                {
                  label: "下午标准",
                  prop: "standardEvening",
                  formatter:function(row){
                    return  Math.floor(row.standardEvening * 100) / 100 + ' 小时'
                   }
                },
                {
                  label: "下午时长",
                  prop: "evening",
                  formatter:function(row){
                    return  Math.floor(row.evening * 100) / 100 + ' 小时'
                   }
                },
                {
                  label: "标准巡查距离",
                  prop: "standardDistance",
                  formatter:function(row){
                    return  Math.floor(row.standardDistance * 100) / 100 + '米'
                   }
                },
                {
                  label: "实际巡查距离",
                  prop: "distance",
                   formatter:function(row){
                    if(row.distance ==-1){
                      return  0 + '米'
                    }else{
                      return  Math.floor(row.distance * 100) / 100 + '米'
                    }
                   }
                },
                 {
                  label: "是否合格",
                  prop: "pass",
                  dicData: [
                    {
                      label:"不合格",
                      value:"N",
                    },
                    {
                      label:"合格",
                      value:"Y",
                    },
                    {
                      label:"全天假",
                      value:"V",
                    },
                  ]
                },
                {
                  label: "假",
                  prop: "vacation",
                  hide: true
                },
              ]
        },
        dataScope: [],
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {

        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      //关闭窗口
      handleCancel(FormName){
        this.vacationShow = false;
        this.$refs[FormName].resetFields()
      },
      //上午假
      handleVacation1(row){
        this.vacationForm.userId = row.id;
        this.vacationForm.dutyDay = row.dutyDay;
        this.vacationForm.morningOrEvening  = 'morning';
        this.vacationShow = true
      },
       //下午假
      handleVacation2(row){
        this.vacationForm.userId = row.id;
        this.vacationForm.dutyDay = row.dutyDay;
        this.vacationForm.morningOrEvening  = 'evening';
        this.vacationShow = true
      },
      handleVacationSave(FormName,done,loading){
            this.$refs[FormName].validate((valid) => {
              if (!valid){
                console.log('error submit!!');
                return false;
              }else{
                let form = null;
                form = this.vacationForm;
                const params = form;
                  vacationSave(params).then(() => {
                    this.$refs[FormName].resetFields();
                    this.onLoadScope(this.page);
                    this.$message({
                      type: "success",
                      message: "保存成功!"
                    });
                    this.vacationShow = false;
                    this.onLoadScope(this.page);
                  }, error => {
                    loading();
                    window.console.log(error);
                  });
              }
            })
      },
      rowStyle({rowIndex}){
        if(rowIndex%2===0){
          return {
              backgroundColor:'#eee',
              
          }
        }
      },
      cellStyle({row,columnIndex}){
        if(columnIndex==8){
          if(row.pass=="Y"){
            return {
              color:'green',
              fontWeight:'bold',
              fontSize:'20'
            }
          }else if(row.pass=="V"){
            return {
              color:'#0000FF',
              fontWeight:'bold',
              fontSize:'20'
            }
          }else{
            return {
              color:'red',
              fontWeight:'bold',
              fontSize:'20'
            }
          }
        }
        },
      addClass({columnIndex}){
        if(columnIndex === 7){
          return 'cell-blue'
        }
      },
      beforeOpen(done) {
        done();
      },
      //表格点击事件
      handleCell(row,column){
         if(column.label=="合格率") {
           this.beginDate= row.beginDate,
           this.endDate = row.endDate,
           this.id = row.id,
           this.onLoadScope(this.pageScope);
         }
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
         const {timeRange} = params;
        let values = {
          ...params,
        };
        if (timeRange) {
          values = {
            ...params,
            beginDate: timeRange[0],
            endDate: timeRange[1],
          };
          values.timeRange = null;
          this.query.timeRange = null;
        }else{
          this.$message.warning('请先填写考核时段');
          return;
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      },
      onLoadScope(page) {
          const id = this.id;
         const beginDate = this.beginDate;
         const endDate = this.endDate;
        getOneAppraiseList(page.currentPage, page.pageSize,id,beginDate,endDate).then(res => {
          const data = res.data.data;
          this.pageScope.total = data.total;
          this.dataScope = data.records;
          this.selectionListScope = [];
           this.oneAppraiseBox = true;
        });
      },
    }
  };
</script>

<style>
.el-form-item__content{
   margin-left: 118px ! important;
}
.el-form-item__label {
  width: 118px ! important;
}   
.cell-blue{
    color: blue!important;
    cursor: pointer;
}
</style>

